<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化</title>
    <link rel="stylesheet" href="fonts/icomoon.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!-- 头部部分 -->
    <header>
      <img src="images/logo.png" alt="" class="logo" />
    </header>

    <!-- 主体部分 -->
    <div class="container">
      <!-- 左边部分 -->
      <div class="container-left">
        <!-- 设备总量 -->
        <ul class="panel device">
          <li class="device-item">
            <h4 class="item-num">2,190</h4>
            <p class="item-text"><i class="icon-dot"></i>设备总数</p>
          </li>
          <li class="device-item">
            <h4 class="item-num">190</h4>
            <p class="item-text"><i class="icon-dot"></i>季度新增</p>
          </li>
          <li class="device-item">
            <h4 class="item-num">3,001</h4>
            <p class="item-text"><i class="icon-dot"></i>运营设备</p>
          </li>
          <li class="device-item">
            <h4 class="item-num">108</h4>
            <p class="item-text"><i class="icon-dot"></i>异常设备</p>
          </li>
        </ul>
        <!-- 故障监控 -->
        <div class="panel monitoring">
          <div class="common-title">
            <span>故障设备监控</span>
            <span class="line"></span>
            <span class="abnormal">异常设备监控</span>
          </div>
          <div class="list-head">
            <span>故障时间</span>
            <span>设备地址</span>
            <span>异常代码</span>
          </div>
          <ul class="list-body"></ul>
        </div>
        <!-- 点位分布 -->
        <div class="panel point">
          <div class="common-title">点位分布统计</div>
          <div class="panel-body">
            <div class="point-chart">饼图</div>
            <div class="point-info">
              <div class="point-item">
                <h4>320,11</h4>
                <p><i class="icon-dot"></i>点位总数</p>
              </div>
              <div class="point-item">
                <h4>418</h4>
                <p><i class="icon-dot"></i>本月新增</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="container-center">
        <h4 class="title"><i class="icon-cube"></i>设备数据统计</h4>
        <!-- 中间地图 -->
        <div class="map"></div>
        <!-- 全国用户部分 -->
        <div class="user panel">
          <div class="common-title">全国用户量统计</div>
          <div class="user-body">
            <div class="user-chart">柱状图</div>
            <div class="user-info">
              <div class="user-item">
                <h4>120,899</h4>
                <p><i class="icon-dot"></i>用户总量</p>
              </div>
              <div class="user-item">
                <h4>248</h4>
                <p><i class="icon-dot"></i>本月新增</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边部分 -->
      <div class="container-right">
        <!-- 订单量部分 -->
        <div class="order panel">
          <div class="order-title">
            <span>365天</span>
            <i class="line"></i>
            <span class="current">90天</span>
            <i class="line"></i>
            <span>30天</span>
            <i class="line"></i>
            <span>24小时</span>
          </div>
          <div class="order-info">
            <div class="order-item">
              <h4 class="item-num">301,987</h4>
              <p class="item-text"><i class="icon-dot"></i>订单量</p>
            </div>
            <div class="order-item">
              <h4 class="item-num">9834</h4>
              <p class="item-text"><i class="icon-dot"></i>销售额(万元)</p>
            </div>
          </div>
        </div>
        <!-- 销售额部分 -->
        <div class="sell panel">
          <div class="common-title">
            <span>销售额统计</span>
            <span class="line"></span>
            <ul class="date">
              <li class="current">年</li>
              <li>季</li>
              <li>月</li>
              <li>周</li>
            </ul>
          </div>
          <div class="sell-chart">曲线图</div>
        </div>
        <!-- 渠道与进度部分 -->
        <div class="right-group">
          <div class="channel panel">
            <div class="common-title">渠道分布</div>
            <ul class="channel-body">
              <li class="channel-item">
                39 <span>%</span>
                <i class="icon-plane">&nbsp;机场</i>
              </li>
              <li class="channel-item">
                28 <span>%</span>
                <i class="icon-bag">&nbsp;商场</i>
              </li>
              <li class="channel-item">
                20 <span>%</span>
                <i class="icon-train">&nbsp;地铁</i>
              </li>
              <li class="channel-item">
                13 <span>%</span>
                <i class="icon-bus">&nbsp;火车站</i>
              </li>
            </ul>
          </div>
          <div class="progress panel">
            <div class="common-title">—季度销售进度</div>
            <div class="progress-chart">扇形图</div>
            <div class="progress-info">
              <div class="progress-item">
                <h4 class="item-num">1,321</h4>
                <p class="item-text"><i class="icon-dot"></i>销售额(万元)</p>
              </div>
              <div class="progress-item">
                <h4 class="item-num">150%</h4>
                <p class="item-text"><i class="icon-dot"></i>同比增长</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 热榜部分 -->
        <div class="hot panel">
          <div class="hot-head">
            <span>全国热榜</span>
            <span>各省热销</span>
            <span class="lately">近30日</span>
          </div>
          <div class="hot-body">
            <div class="col01">
              <div class="col01-item">
                <i class="icon-cup1" style="color: #d93f36"></i>
                <span>可爱多</span>
              </div>
              <div class="col01-item">
                <i class="icon-cup2" style="color: #68d8fe"></i>
                <span>娃哈哈</span>
              </div>
              <div class="col01-item">
                <i class="icon-cup3" style="color: #4c9bfd"></i>
                <span>喜之郎</span>
              </div>
            </div>
            <div class="col02">
              <div class="col02-item">
                <span class="item-text">北京</span>
                <span class="item-num">25,179 <i class="icon-up"></i></span>
              </div>
              <div class="col02-item current">
                <span class="item-text">河北</span>
                <span class="item-num">23,252 <i class="icon-down"></i></span>
              </div>
              <div class="col02-item">
                <span class="item-text">上海</span>
                <span class="item-num">20,760 <i class="icon-up"></i></span>
              </div>
              <div class="col02-item">
                <span class="item-text">江苏</span>
                <span class="item-num">23,252 <i class="icon-down"></i></span>
              </div>
              <div class="col02-item">
                <span class="item-text">山东</span>
                <span class="item-num">20,760 <i class="icon-up"></i></span>
              </div>
            </div>
            <div class="col03">
              <div class="col03-item">
                <span class="item-text">可爱多</span>
                <span class="item-num">9,086 <i class="icon-up"></i></span>
              </div>
              <div class="col03-item">
                <span class="item-text">小洋人</span>
                <span class="item-num">6,724 <i class="icon-up"></i></span>
              </div>
              <div class="col03-item">
                <span class="item-text">好多鱼</span>
                <span class="item-num">2,170 <i class="icon-up"></i></span>
              </div>
              <div class="col03-item">
                <span class="item-text">娃哈哈</span>
                <span class="item-num">8,341 <i class="icon-up"></i></span>
              </div>
              <div class="col03-item">
                <span class="item-text">可爱多</span>
                <span class="item-num">9,086 <i class="icon-up"></i></span>
              </div>
              <div class="col03-item">
                <span class="item-text">小洋人</span>
                <span class="item-num">6,724 <i class="icon-up"></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="js/jquery.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <script src="js/china.js"></script>
  <script src="js/index2.js"></script>
</html>
